import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaDialog, WeaUpload, WeaRightMenu, WeaLocaleProvider, WeaSearchGroup, WeaFormItem, WeaSelect } from "ecCom";
import { Button, Spin, Row, message } from "antd";
const getLabel = WeaLocaleProvider.getLabel;
import * as Util from "../../../util/Util";
import ImportLog from '../../../public/importlog/ImportLog';
import SelectOptions from './SelectOptions';
@inject("goalBaseStore", "goalCommonStore")
@observer
export default class GoalImport extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            rightMenu: [// 右键菜单
                {
                    key: '0',
                    icon: <i className='icon-coms02-Import' />,
                    content: getLabel(25649, '开始导入'),
                    onClick: () => this.startImport()
                },
            ],
            fileIds: [],
            fileList: [],
            createvisable: false, // 展示导入日志
            checkOptions:[
                {
                    key: "lastname",
                    selected: true,
                    showname: getLabel(25034, '姓名'),
                },
                {
                    key: "id",
                    selected: false,
                    showname: getLabel(128556,'人员ID'),
                },
                {
                    key: "loginid",
                    selected: false,
                    showname: getLabel(412,'登录名'),
                },
                {
                    key: "workcode",
                    selected: false,
                    showname: getLabel(20120,'工作编号'),
                },
                {
                    key: "mobile",
                    selected: false,
                    showname: getLabel(22482,'手机号码'),
                },
                {
                    key: "email",
                    selected: false,
                    showname: getLabel(20869,'邮箱'),
                }, 
            ],
            operateOptions:[
                {
                    key: "add",
                    selected: true,
                    showname: getLabel(1421,'新增') ,
                },
                {
                    key: "update",
                    selected: false,
                    showname:getLabel(17744,'更新') ,
                },
            ],
            checkValue:"lastname",
            operateValue:"add",
            showSelectOptions:false,
            createDate:"",
        },
            this.uploading = false;
    }

    componentWillMount() {//一些初始化请求
        const { goalBaseStore } = this.props;
        goalBaseStore.loading = false;
    }


    //重置附件
    resetFile = () => {
        this.setState({ fileList: [] })
    }

    //开始导入
    startImport = () => {
        const { goalBaseStore } = this.props;
        const { createDate, showSelectOptions } = this.state;
        if(Util.isBlank(createDate) && showSelectOptions){
            message.warn(getLabel(27938,'请选择日期'))
            return;
        }
        goalBaseStore.loading = true;
        if (this.uploading) {
            this.refs.importgoalupload.doUpload();
            this.setState({ createvisable: true })
        } else {
            goalBaseStore.loading = false;
            message.warn(getLabel(32153, '请选择附件'))
            return;
        }
    }

    onCancel = () => {
        const { setShowImport } = this.props.goalCommonStore;
        setShowImport(false)
    }

    //模板下载
    downLoadTemplate = () => {
        const { goalBaseStore } = this.props;
        goalBaseStore.downLoadTemplate({ type: "person" });
    }

    upload = (ids, list) => {
        const { goalBaseStore } = this.props;
        const { checkValue, operateValue, createDate} = this.state;
        if (ids.length <= 0) {
            message.warn(getLabel(32153, '请选择附件'))
            return;
        }
        goalBaseStore.goalPersonImportInfo({ fileid: ids[0], type: "person",checkType:checkValue,importType:operateValue,createDate,callBack:()=>{
            this.resetFile()
        }});
    }

    setUploading = (listB) => {
        this.uploading = listB.length > 0 ? true : false;
    }

    onlyClose = () => {
        const { doback } = this.props;
        if(typeof doback === "function"){
            doback();
        }
        this.setState({ createvisable: false })
    }

    //更改下拉选项
    onOptionChange = (type,value) =>{
        if(type == "operateValue"){
            if(value == "add"){
                this.setState({[type]:value,showSelectOptions:false})
                return;
            }else{
                this.setState({[type]:value,showSelectOptions:true})
                return;
            }
        }
        this.setState({[type]:value})
    }

    selectOptionCallBack = (type,value) =>{
        this.setState({[type]:value})
    }

    callBack = (datas)=>{
        const { goalBaseStore } = this.props;
        goalBaseStore.reslutData = datas;
    }

    getButtons = (ecId) =>{
        const { loading } = this.props.goalBaseStore;
        return [<Button ecId={`${ecId}_Button@6i6ot1@startimport`} type="primary" loading={loading}  onClick={this.startImport}>{getLabel(25649, '开始导入')}</Button>,
        <Button ecId={`${ecId}_Button@j3v7s6@importcancel`} type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>]
    }

    render() {
        const { goalCommonStore, goalBaseStore } = this.props;
        const { showImport } = goalCommonStore;
        const { ifupload, loading, reslutData } = goalBaseStore;
        const { buttons, rightMenu, fileList, createvisable, checkOptions, checkValue, operateOptions, operateValue, showSelectOptions } = this.state;
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@c42pex`} className="workrelate-wea-goal-import"
                icon='icon-coms-implement'
                iconBgcolor='rgb(150, 53, 138)'
                title={getLabel(508900, '目标导入')}
                visible={showImport}
                buttons={this.getButtons(this.props.ecId || '')}
                onCancel={() => this.onCancel()}
                style={{ width: 800, height: 580 }}
                hasScroll
            >
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@w2a9t3`} spinning={loading}>
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@skbnqh`}
                        datas={rightMenu} // 右键菜单
                    >
                        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@w4vj8b`} title={getLabel(81711, '基本信息')} showGroup={true} >
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@5ibrql`}>
                                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@aqvxxj`} label={getLabel(384017, '验证字段')} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@jqphcw`}
                                        options={checkOptions}
                                        style={{width:150}}
                                        value={checkValue}
                                        viewAttr={2}
                                        onChange={(v) => {
                                            this.onOptionChange("checkValue",v);
                                        }}
                                    />
                                </WeaFormItem>
                                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@u8lfk8`} label={getLabel(126207,'操作类型') } labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@9l97w0`}
                                        options={operateOptions}
                                        style={{width:150}}
                                        value={operateValue}
                                        viewAttr={2}
                                        helpfulTip={operateValue=="update"?getLabel(521489,'根据名称，导入人，导入日期更新对应的导入数据') :""}
                                        onChange={(v) => {
                                            this.onOptionChange("operateValue",v);
                                        }}
                                    />
                                </WeaFormItem>
                            </Row>
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@fnv37m`}>
                                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@skfpyt`} label={getLabel(32153, '请选择附件')} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                                    {ifupload && <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@rl0mmg`}
                                        uploadUrl="/api/doc/upload/uploadFile"
                                        category="string"
                                        viewAttr={3}
                                        limitType={'xls,xlsx'}
                                        isDetail={false}
                                        autoUpload={false}
                                        showClearAll={false}
                                        onChange={(ids, list) => this.upload(ids, list)}
                                        getShowListDatas={(listT, listB) => this.setUploading(listB)}
                                        ref={'importgoalupload'}
                                        maxFilesNumber={1}
                                        sortable={false}
                                        datas={fileList}
                                    />}
                                </WeaFormItem>
                            </Row>
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@kc0fds`}>
                                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@pkw1ww`} label={getLabel(19971, '模板文件')} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                                    <a className="workrelate-goal-download" href="/workrelate/goal/import/workrelategoalexcel.xls">{getLabel(27625, '模板下载')}</a>
                                </WeaFormItem>
                            </Row>
                        </WeaSearchGroup>
                        {showSelectOptions && <SelectOptions ecId={`${this && this.props && this.props.ecId || ''}_SelectOptions@7f8kg2`} onCallBack = {(type,value)=>this.selectOptionCallBack(type,value)}></SelectOptions>}
                        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@kmonf7`} title={getLabel(33803,'导入说明')} showGroup={true} >
                        <div style={{ "paddingLeft": "20px", "paddingRight": "20px" }}>
                                <div className="workrelate-goal-import-step">1.{getLabel(521434, '导入操作者默认为创建人,责任人不填写默认为创建人')}</div>
                                <div className="workrelate-goal-import-step">2.{getLabel(524549, "如果导入数据过多，导入可能需要较长时间，请不要“刷新”或“关闭窗口”")}</div>
                                <div className="workrelate-goal-import-step">3.{getLabel(524550, '重复验证字段说明：')}</div>
                                <div style={{marginLeft:20}}>① {getLabel(524551, '选择“姓名(lastname)”时，模板中的人员相关字段需要填写人员姓名')}</div>
                                <div style={{marginLeft:20}}>② {getLabel(524552, '选择“人员id(id)”时，模板中的人员相关字段需要填写人员id')}</div>
                                <div style={{marginLeft:20}}>③ {getLabel(524553, '选择“登录名(loginid)”时，模板中的人员相关字段需要填写人员登录名')}</div>
                                <div style={{marginLeft:20}}>④ {getLabel(524554, '选择“工作编号(workcode)”时，模板中的人员相关字段需要填写工作编号')}</div>
                                <div style={{marginLeft:20}}>⑤ {getLabel(524555, '选择“手机号码(mobile)”时，模板中的人员相关字段需要填写手机号码')}</div>
                                <div style={{marginLeft:20}}>⑥ {getLabel(524556, '选择“邮箱(email)”时，模板中的人员相关字段需要填写邮箱')}</div>
                            </div>
                        </WeaSearchGroup>
                        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@7vzpl7`} visible={createvisable} title={getLabel(24835, '导入日志')} icon="icon-coms-implement" iconBgcolor="rgb(150, 53, 138)"
                            style={{ width: 700, height: 580 }}
                            onCancel={this.onlyClose}
                            buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pyld2e@close`} type="ghost" onClick={this.onlyClose}>{getLabel(309, '关闭')}</Button>]}
                            >
                            <ImportLog ecId={`${this && this.props && this.props.ecId || ''}_ImportLog@fgpxc8`} loading={loading} type ={"GOAL_IMPORT_INFO"} reslutData={reslutData} onCallBack={(data)=>this.callBack(data)}/>
                        </WeaDialog> 
                    </WeaRightMenu>
                </Spin>
            </WeaDialog>
        )
    }

}